<template>
  <view>
    <!--服务评价-->
    <view class="service">
      <!--评分-->
      <view class='score'>
        <view class='left'>
          评分
        </view>
        <view class='right'>
          <view v-for="(val, index) in 5" class="star">
             <image @tap="setStar(index + 1)" class="img"
              :src="star > index ? 'https://mkservice.mk-iot.com/subFile/mkApplet/star.png' : 'https://mkservice.mk-iot.com/subFile/mkApplet/no-star.png'" mode="aspectFill"></image>
          </view>
          <text class='rtxt'>{{ starName[star - 1] }}</text>
        </view>
      </view>
      <!--内容-->
      <view class='content'>
        <view class='left'>
          内容
        </view>
        <view class='right'>
          <!--textarea-->
          <view class="conts">
            <textarea class="areas" placeholder='评价内容请写在这里（最多300字）' :minlength="min" :maxlength="max"
              @blur="bindTextAreaBlur" v-model="evaluateContent" :disabled="isdisabled">
            </textarea>
          </view>
        </view>
      </view>
      <!--图片-->
      <view class='picture'>
        <view class='left'>
          图片
        </view>
        <view class='right'>
          <view class="feedback-image-item" v-for="(item,index) in pics" :key="index">
            <view class="close-icon" v-if="!isdisabled" @tap="delImg(index)">
              <uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
            </view>
            <view class="image-box">
              <image :src="item.url" mode="aspectFill" @tap="previewImg(item.url)"></image>
            </view>
          </view>

          <view v-if="pics.length <5 && !isdisabled" class="feedback-image-item" @tap="addImage">
            <view class="image-box">
              <uni-icons type="plusempty" size="50" color="#c7c7c7"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--提交评价-->
    <button class='btn' @tap='handleBtn' v-if="!isdisabled">提交评价</button>
  </view>
</template>

<script>
  import {
    pathToBase64
  } from '../../js_sdk/mmmm-image-tools/index.js'
  import {
    updateTask,
    getTask,
    uploadEvaluateImg,
    queryEvaluateImgList,
    addMkMaintenanceList,
  } from "@/api/system/task/task.js"
  import getDateTime from '../../utils/getdateTime.js'
  import config from '@/config'
  const baseUrl = config.baseUrl
  export default {
    data() {
      return {
        isdisabled: false,
        placeholder: '开始输入...',
        star: 0, //课程评价，默认5星
        starName: ['极差', '一般般', '良好', '非常好', '非常棒'],
        // textarea
        min: 5, //最少字数
        max: 300, //最多字数 (根据自己需求改变) 
        maintenanceCode: '',
        maintainerEvaluate: '',
        repairList: [],
        evaluateContent: '',
        pics: [],
        imglist: [],
        queryImgList: {
          pageNum: 1,
          pageSize: 5,
          evaluateCode: ''
        },
      };
    },
    onLoad(option) {
      //判断是否有id查询数据到表单
      if (option.maintenanceCode != null) {
        this.maintenanceCode = option.maintenanceCode
        this.getwarrantyItem()
      }
    },
    methods: {
      //根据id获取数据
      getwarrantyItem() {
        getTask(this.maintenanceCode).then(response => {
          if (response.code === 200) {
            this.repairList = response.data
            if (this.repairList.maintainerEvaluate != null) {
              this.isdisabled = true
              this.star = this.repairList.maintainerEvaluate
              this.evaluateContent = this.repairList.remark
              this.queryImgList.evaluateCode = this.repairList.maintenanceCode
              queryEvaluateImgList(this.queryImgList).then(response => {
                if (response.code === 200) {
                  response.rows.forEach((item, index) => {
                    //处理小程序多选状况
                    this.pics.push({
                      url: baseUrl + item.evaluateImgUrl
                    })
                  })
                }
              })
            }
          }
        })
      },
      //设置评分
      setStar(star) {
        if (this.isdisabled == false) {
          this.star = star;
        }
      },
      //获取内容
      bindTextAreaBlur(e) {
        this.evaluateContent = e.detail.value
      },
      //删除图片
      delImg(index) {
        this.pics.splice(index, 1)
      },
      //浏览图片
      previewImg(url) {
        const thant=this
        thant.imglist = []
        //放到图片列表里可以查询
        thant.pics.forEach((item, index) => {
          thant.imglist.push(item.url)
        })
        uni.previewImage({
          urls: thant.imglist,
          current: url,
          // 下面我这边做的都是默认的选择
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
                thant.$modal.msgSuccess(data)
            },
            fail: function(err) {
                thant.$modal.msgError(err)
            }
          }
        })
      },
      //新增图片
      addImage() {
        const count = 5 - this.pics.length
        uni.chooseImage({
          count: count, // 最多可以选择的图片张数，默认9
          sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
          sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
          success: (res) => {
            const tempFilePaths = res.tempFilePaths;
            tempFilePaths.forEach((item, index) => {
              if (index < count) {
                //处理小程序多选状况
                this.pics.push({
                  url: item
                })
              }
            })
          }
        })
      },
      //这里触发图片上传的方法
      uploadimg(index) {
        let data = {
          maintenanceCode: this.maintenanceCode,
          name: 'evaluateImg',
          filePath: this.pics[index].url
        }
        uploadEvaluateImg(data).then(response => {
          if (response.code == 200) {
            uni.showToast({
              title: "上传成功",
              icon: 'success'
            })
          }
        })
      },
      //提交评价
      async handleBtn() {
        if (this.star == 0) {
          this.$modal.showToast("评分不能为空")
        } else if (this.evaluateContent == '') {
          this.$modal.showToast("评价内容不能为空")
        } else if (this.evaluateContent.length < this.min) {
          this.$modal.showToast("评价内容字数不能少于5个")
        } else if (this.evaluateContent.length > this.max) {
          this.$modal.showToast("评价内容字数不能超过300个")
        } else {
          this.repairList.maintainerEvaluate = parseInt(this.star)
          this.repairList.remark = this.evaluateContent
          //判断是否有上传图片，如果有就循环上传
          const stateData = [{
            maintenanceCode: this.maintenanceCode,
            state: "用户已评价",
            datetime: getDateTime.dateTimeStr('y-m-d h:i:s'),
            descs: ""
          }, {
            maintenanceCode: this.maintenanceCode,
            state: "结束",
            datetime: getDateTime.dateTimeStr('y-m-d h:i:s'),
            descs: ""
          }]
          addMkMaintenanceList(stateData).then(response => {
            if (response.code == 200) {
              updateTask(this.repairList).then(response => {
                if (response.code === 200) {
                  if (this.pics.length > 0) {
                    this.pics.forEach((item, index) => {
                      this.uploadimg(index)
                    })
                  }
                  uni.$emit("toOverList", {
                    value: 1
                  });
                  uni.navigateBack({
                    delta: 1,
                    success: (res) => {
                      if (res.errMsg = "navigateBack:ok") {
                        uni.showToast({
                          title: "评价成功",
                          icon: 'success'
                        })
                      }
                    }
                  })
                }
              })
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
  }

  .service {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 20rpx;
    background: #fff;
  }

  .score {
    width: 100%;
    height: 100rpx;
    border-bottom: 1px solid #ccc;
  }

  .star {
    float: left;
    width: 54rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
  }

  .star image {
    width: 43rpx;
    height: 43rpx;
    margin-top: 30rpx;
  }

  .score .left {
    width: 100rpx;
    line-height: 100rpx;
    font-size: 30rpx;
    float: left;
  }

  .score .right {
    width: 610rpx;
    font-size: 30rpx;
    float: left;
    color: #888;
  }

  .score .right .rtxt {
    display: inline-block;
    height: 100rpx;
    line-height: 110rpx;
    margin-left: 20rpx;
    color: #c00;
    font-weight: bold;
  }

  .labelColor {
    color: #c00;
    border: 1px solid #c00 !important;
  }

  .content {
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    padding: 0 0 26rpx 0;
    box-sizing: border-box;
  }

  .content .left {
    width: 100rpx;
    font-size: 30rpx;
    float: left;
    padding-top: 25rpx;
  }

  .content .right {
    width: 610rpx;
    font-size: 24rpx;
    float: left;
    color: #888;
  }

  .content .right text {
    font-size: 24rpx;
    padding: 13rpx 24rpx;
    float: left;
    border: 1px solid #888;
    border-radius: 10rpx;
    margin-right: 34rpx;
    margin-top: 20rpx;
  }

  .picture {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #ccc;
  }

  .picture .left {
    width: 100rpx;
    font-size: 30rpx;
    float: left;
    padding-top: 20rpx;
  }

  .picture .right {
    width: 610rpx;
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx;

    .feedback-image-item {
      position: relative;
      width: 33.33%;
      height: 0;
      padding-top: 33.33%;
      box-sizing: border-box;

      .close-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        background-color: #ff5a5f;
        z-index: 2;
      }

      .image-box {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        left: 10rpx;
        bottom: 10rpx;
        border: 1px #c7c7c7 solid;
        border-radius: 10rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .According {
    width: 120rpx;
    height: 120rpx;
    float: left;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
  }

  .parcel {
    width: 120rpx;
    height: 120rpx;
    float: left;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
    position: relative;
  }

  .deleteimg {
    width: 30rpx;
    height: 30rpx;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }

  .conts {
    width: 100%;
    height: auto;
    background: #fff;
  }

  textarea {
    width: 610rpx;
  }

  .areas {
    height: 315rpx;
    font-size: 30rpx;
    padding-top: 30rpx;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }

  .currentWordNumber {
    font-size: 28rpx;
    position: absolute;
    left: 0%;
    bottom: 0rpx;
    color: #c00;
  }

  .hint {
    font-size: 28rpx;
    position: absolute;
    top: 120rpx;
    left: 30rpx;
    color: #FF6600;
  }

  .btn {
    width: 600rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    color: #fff;
    background: #c00;
    position: fixed;
    left: 75rpx;
    bottom: 37rpx;
  }

  button:after {
    border: 0;
  }
</style>